<template>
  <div class="sunburn">
      <div class="tit">
        酱酱的拆单
        <img src="../../assets/images/share.png" alt="">
      </div>

      <div class="mui-card">
        <div class="mui-card-header mui-card-media">
          <img src="../../assets/images/product.png">
          <div class="mui-media-body">
            <div class="gq">
              <p></p>
            </div>
            <p>HITACHICM-N400美容仪</p>
            <div class="priceObtn">
              <span>¥888</span>
              <p>X1</p>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {

  data () {
    return {
    }
  },

  methods: {},

  created () {
  }
}
</script>

<style lang='less' scoped>
.tit{
  img{
    width:18px;
    float:right;
  }
}
.sunburn{
    .mui-card{
      margin: 18px 0;
      border: 1px solid #E7E7E7;
      box-shadow: 0 8px 18px 0 rgba(0,0,0,0.03);
      border-radius: 15px;
      .mui-card-header{
        overflow: hidden;
        img{
          width:70px;
          height:70px;
          margin: 10px;
          border-radius:10px;
        }
        .mui-media-body{
          margin-left: 90px;
          p{
            font-size: 14px;
            color: #333333;
          }
          .gq{
            width:14px;
            height:10px;
            border: 1px solid #F2F2F2;
            margin: 16px 0 5px 0;
            p{
              width:4px;
              height:4px;
              margin: 2.5px 4px;
              background: red;
              border-radius:2px;
            }
          }
          .priceObtn{
            margin-top: 12px;
            span{
              float: left;
              font-size: 16px;
              color: #E4007B;
              
            }
            p{
              float:right;
              height:auto;
              margin: 0;
            }
          }
        }
      }
      .mui-card-header:after{
        height:0;
      }
    }
}

</style>
